<template>
    <div class="category">
        <el-select class="category-select" model-value="安徽省" size="default">
            <el-option label="安徽省" value="1"></el-option>
            <el-option label="江苏省" value="2"></el-option>
        </el-select>
        <el-select class="category-select" model-value="合肥市" size="default">
            <el-option label="合肥市" value="1"></el-option>
            <el-option label="六安市" value="2"></el-option>
        </el-select>
        <el-select class="category-select" model-value="电脑" size="default">
            <el-option label="电脑" value="1"></el-option>
            <el-option label="手机" value="2"></el-option>
        </el-select>
    </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.category {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    // el-select组件使用box-shadow属性设置边框
    :deep(.el-select__wrapper) {
        width: 90px;
        margin-left: 10px;
        border-radius: 20px;
        box-shadow: 0 0 0 1px #2473ef inset;
    }
}
</style>
